您说：
<template>
  <div class="sci-fi-container">
    <!-- 科幻风格标题 -->
    <div class="sci-fi-title">
      <i class="el-icon-s-promotion"></i>
      融合5G的低轨卫星波束管理仿真系统
      <el-tag class="conn-status" :type="connTagType">{{ connectionStatus }}</el-tag>
    </div>

    <!-- 顶部布局：配置 | 概览 | 操作 -->
    <el-row :gutter="24" class="sci-fi-top">
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="sci-card config-card" shadow="never">
          <div slot="header" class="sci-header"><i class="el-icon-setting"></i> 参数配置</div>
          <el-form label-position="top" class="sci-form">
            <div class="form-grid">
              <el-form-item label="v">
                <el-input-number v-model="params.v" :min="0" :step="0.005" />
              </el-form-item>
              <el-form-item label="M">
                <el-input-number v-model="params.m" :min="1" />
              </el-form-item>
              <el-form-item label="n_ssb">
                <el-input-number v-model="params.n_ssb" :min="1" />
              </el-form-item>
              <el-form-item label="n_total">
                <el-input-number v-model="params.n_total" :min="1" />
              </el-form-item>
              <el-form-item label="μ">
                <el-input-number v-model="params.mu" :min="0" :step="0.005" />
              </el-form-item>
              <el-form-item label="maxRounds">
                <el-input-number v-model="params.maxRounds" :min="1" />
              </el-form-item>
              <el-form-item label="T">
                <el-input-number v-model="T" :min="1" />
              </el-form-item>
            </div>
          </el-form>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="sci-card status-card" shadow="never">
          <div slot="header" class="sci-header"><i class="el-icon-data-line"></i> 实时概览</div>
          <el-row :gutter="16">
            <el-col :span="12" v-for="item in statusItems" :key="item.label">
              <div class="status-item">
                <div class="status-label">{{ item.label }}</div>
                <div class="status-value">{{ item.value }}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="8">
        <el-card class="sci-card action-card" shadow="never">
          <div slot="header" class="sci-header"><i class="el-icon-s-operation"></i> 操作中心</div>
          <div class="action-buttons">
            <el-button :loading="btnLoading.start" @click="startQueue" type="primary" icon="el-icon-play">
              启动仿真
            </el-button>
            <el-button :loading="btnLoading.generate" @click="generateSamples" type="warning" icon="el-icon-upload2">
              生成样本
            </el-button>
            <el-button @click="flushBuffer(true)" type="info" icon="el-icon-refresh">
              手动刷新
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 科幻版趋势图 -->
    <el-card class="sci-card chart-card" shadow="always">
      <div ref="chart" class="chart-area"></div>
    </el-card>

    <!-- 历史数据表格 -->
    <el-card class="sci-card table-card" shadow="always">
      <div slot="header" class="sci-header"><i class="el-icon-document"></i> 历史数据</div>
      <el-table :data="reversedHistory" height="300" border stripe v-loading="loading">
        <el-table-column prop="timestamp" label="时间" width="180">
          <template slot-scope="{ row }">{{ formatTime(row.timestamp) }}</template>
        </el-table-column>
        <el-table-column prop="waitQueueLength" label="等待队列" width="120" />
        <el-table-column prop="doingQueueLength" label="处理队列" width="120" />
        <el-table-column prop="beamCount" label="波位总数" width="120" />
        <el-table-column label="真实接入" width="120">
          <template slot-scope="{ row }">{{ row.realAccessCount[selectedIndex] || 0 }}</template>
        </el-table-column>
        <el-table-column label="估计接入" width="120">
          <template slot-scope="{ row }">{{ row.estimatedAccessCount[selectedIndex] || 0 }}</template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 科幻底部 -->
    <div class="sci-footer">© 2025 张艳津 · 星际科技</div>
  </div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';
import { connectWebSocket, disconnectWebSocket } from '@/utils/websocket';

export default {
  name: 'QueueStatus',
  data() {
    return {
      statusHistory: [],
      params: { v: 0.02, m: 64, n_ssb: 8, n_total: 512, mu: 0.3, maxRounds: 300 },
      T: 100,
      selectedIndex: 0,
      latest: { waitQueueLength: 0, doingQueueLength: 0, beamCount: 0, realAccessCount: [], estimatedAccessCount: [] },
      connectionStatus: 'Disconnected',
      chartInstance: null,
      incomingBuffer: [],
      flushTimer: null,
      loading: false,
      btnLoading: { start: false, generate: false }
    };
  },
  computed: {
    reversedHistory() { return [...this.statusHistory].reverse(); },
    connTagType() {
      switch (this.connectionStatus) {
        case 'Connected': return 'success';
        case 'Connecting': return 'info';
        case 'Error': return 'danger';
        default: return 'warning';
      }
    },
    statusItems() {
      return [
        { label: '等待队列', value: this.latest.waitQueueLength },
        { label: '处理队列', value: this.latest.doingQueueLength },
        { label: '波位总数', value: this.latest.beamCount }
      ];
    }
  },
  mounted() {
    this.chartInstance = echarts.init(this.$refs.chart);
    this.setupWebSocket();
    this.flushTimer = setInterval(this.flushBuffer, 800);
    window.addEventListener('resize', () => this.chartInstance.resize());
  },
  beforeDestroy() {
    // 断开 WebSocket 连接并清理定时器
    disconnectWebSocket();
    clearInterval(this.flushTimer);
  },
  methods: {
    setupWebSocket() {
      this.connectionStatus = 'Connecting';
      connectWebSocket(
        data => { this.connectionStatus = 'Connected'; if (Array.isArray(data)) this.incomingBuffer.push(...data); },
        () => { this.connectionStatus = 'Disconnected'; },
        () => { this.connectionStatus = 'Error'; }
      );
    },
    flushBuffer(manual = false) {
      if (!this.incomingBuffer.length && manual) return this.$message.warning('No new data');
      if (this.incomingBuffer.length) {
        this.statusHistory.push(...this.incomingBuffer);
        if (this.statusHistory.length > 500) this.statusHistory.splice(0, this.statusHistory.length - 500);
        Object.assign(this.latest, this.statusHistory.slice(-1)[0]);
        this.incomingBuffer = [];
        this.updateChart();
      }
    },
    updateChart() {
      const data100 = this.statusHistory.slice(-100).map(i => ({
        t: new Date(i.timestamp).toLocaleTimeString(),
        w: i.waitQueueLength, d: i.doingQueueLength,
        r: i.realAccessCount[this.selectedIndex]||0, e: i.estimatedAccessCount[this.selectedIndex]||0
      }));
      this.chartInstance.setOption({
        backgroundColor: '#0d0d26',
        textStyle: { color: '#9fdbff' },
        tooltip: { trigger: 'axis', axisPointer:{ lineStyle:{ color:'#47befb'} } },
        legend:{ data:['等待','处理','真实接入','估计接入'], textStyle:{color:'#9fdbff'}},
        dataZoom:[{ type:'inside',start:70,end:100 }],
        xAxis:{ type:'category', boundaryGap:false, data:data100.map(d=>d.t), axisLine:{lineStyle:{color:'#47befb'}}},
        yAxis:{ type:'value', axisLine:{lineStyle:{color:'#47befb'}}, splitLine:{lineStyle:{color:'rgba(71,190,251,0.2)'}}},
        series:[
          { name:'等待', type:'line', data:data100.map(d=>d.w), smooth:true, lineStyle:{color:'#47befb'}, itemStyle:{color:'#47befb'} },
          { name:'处理', type:'line', data:data100.map(d=>d.d), smooth:true, lineStyle:{color:'#ff947f'}, itemStyle:{color:'#ff947f'} },
          { name:'真实接入', type:'line', data:data100.map(d=>d.r), smooth:true, lineStyle:{color:'#9fdbff'}, itemStyle:{color:'#9fdbff'} },
          { name:'估计接入', type:'line', data:data100.map(d=>d.e), smooth:true, lineStyle:{color:'#ffdc5e'}, itemStyle:{color:'#ffdc5e'} }
        ]
      });
    },
    async startQueue() {
      this.btnLoading.start=true;
      try{ await axios.post('/api/queue/start',this.params); this.$message.success('Simulation Started'); }
      catch{ this.$message.error('Start Failed'); }
      this.btnLoading.start=false;
    },
    async generateSamples() {
      this.btnLoading.generate=true; this.loading=true;
      try{
        await axios.post('/api/poisson/generate',null,{params:{T:this.T}});
        await axios.post('/api/poisson/generateEstimated',null,{params:{T:this.T}});
        this.$message.success('Samples Generated');
      }catch{ this.$message.error('Generation Failed'); }
      this.btnLoading.generate=false; this.loading=false;
    },
    formatTime(ts){return new Date(ts).toLocaleString();}
  }
};
</script>

<style scoped>
.sci-fi-container {
  background: #1a1a2e;
  color: #9fdbff;
  padding: 20px;
  font-family: "Orbitron", sans-serif;
}
.sci-fi-title {
  font-size: 30px;
  text-align: center;
  position: relative;
  color: #9fdbff;
  margin-bottom: 25px;
}
.conn-status {
  position: absolute;
  right: 20px;
  top: 5px;
}
.sci-fi-top {
  margin-bottom: 25px;
}
.sci-card {
  background: rgba(30, 30, 60, 0.9);
  border: 1px solid rgba(159, 219, 255, 0.6);
  box-shadow: 0 0 12px rgba(159, 219, 255, 0.5);
  border-radius: 8px;
}
.sci-header {
  color: #47befb;
  font-size: 16px;
  font-weight: 600;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.el-form-item {
  margin-bottom: 12px;
}
.el-input-number .el-input__inner {
  background: transparent;
  border-color: #47befb;
  color: #9fdbff;
}
.el-input-number .el-input__inner:hover,
.el-input-number .el-input__inner:focus {
  border-color: #9fdbff;
}
.action-buttons {
  display: flex;
  justify-content: space-around;
  padding: 15px 0;
}
.el-button {
  font-size: 14px;
}
.status-item {
  text-align: center;
  padding: 15px;
  color: #9fdbff;
}
.status-label {
  font-size: 12px;
  opacity: 0.8;
}
.status-value {
  font-size: 20px;
  margin-top: 5px;
}
.chart-card .chart-area {
  height: 420px;
  border-radius: 8px;
}
.table-card {
  padding: 10px;
}
.el-table {
  background: rgba(30, 30, 60, 0.85);
  color: #9fdbff;
}
.el-table th,
.el-table td {
  background: transparent;
  color: #9fdbff;
}
.sci-footer {
  text-align: center;
  color: #a0a3b1;
  margin-top: 20px;
  font-size: 12px;
}
</style>